<template>
  <div class="app-container">
    <div class="change">
      <p>
        <span>单据日期</span>
        <el-date-picker v-model="tempData.checkTime" value-format="yyyy-MM-dd" type="date" class="userselect" :disabled='islook' placeholder="选择日期"></el-date-picker>
      </p>
			<p>
			  <span>存货分类</span>
			  <el-select v-model="classifyid" placeholder="请选择存货分类" @change="getProduct" :disabled='islook' class="userselect">
			    <el-option
			      v-for="item in twoClassify"
			      :key="item.id"
			      :label="item.name"
			      :value="item.id"
			    ></el-option>
			  </el-select>
			</p>
			<p>
			  <span>操作员</span>
			  <el-input v-model="tempData.checkPersons" type="text" placeholder="请选择操作员" @focus="checkBuyer" :disabled='islook' class="userselect" />
			</p>
			<p>
			  <span>备注</span>
			  <el-input v-model="tempData.remarks" type="text" placeholder="请输入备注" :disabled='islook' class="userselect" />
			</p>
    </div>
    <!-- 产品数据 -->
    <div class="zd3-btm">
      <el-table :data="proData" :show-header="true" style="width: 100%;border-radius: 8px;">
        <el-table-column type="index" label="序号" align="center" width="80" />
				<el-table-column align="center" label="品牌" width="150">
				  <template slot-scope="scope">
				    <input v-model="scope.row.brand" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
				  </template>
				</el-table-column>
        <el-table-column align="center" label="名称" width="150">
          <template slot-scope="scope">
            <input v-model="scope.row.commodityName" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="频率" width="150">
          <template slot-scope="scope">
            <input v-model="scope.row.frequencys" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="润滑方式" width="150">
          <template slot-scope="scope">
            <input v-model="scope.row.lubrication" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="盘点数量" width="150">
          <template slot-scope="scope">
            <input v-model="scope.row.checkNum" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="number" :disabled="!scope.row.ischeck"/>
          </template>
        </el-table-column>
				<el-table-column align="center" label="库存数量" width="150">
				  <template slot-scope="scope">
				    <input v-model="scope.row.num" class="inps" type="number"/>
				  </template>
				</el-table-column>
        <el-table-column align="center" label="参数" width="150">
          <template slot-scope="scope">
            <input v-model="scope.row.parameters" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
          </template>
        </el-table-column>
      	<el-table-column align="center" label="单重" width="150">
      	  <template slot-scope="scope">
      	    <input v-model="scope.row.pieceWeight" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
      	  </template>
      	</el-table-column>
      	<el-table-column align="center" label="功率" width="150">
      	  <template slot-scope="scope">
      	    <input v-model="scope.row.powers" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
      	  </template>
      	</el-table-column>
      	<el-table-column align="center" label="转/分" width="150">
      	  <template slot-scope="scope">
      	    <input v-model="scope.row.revolutionsPerMinute" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
      	  </template>
      	</el-table-column>
      	<el-table-column align="center" label="材质" width="150">
      	  <template slot-scope="scope">
      	    <input v-model="scope.row.texture" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
      	  </template>
      	</el-table-column>
				<el-table-column align="center" label="单位" width="150">
				  <template slot-scope="scope">
				    <input v-model="scope.row.nuit" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
				  </template>
				</el-table-column>
        <el-table-column align="center" label="单价" width="150">
          <template slot-scope="scope">
            <input v-model="scope.row.unitPrice" :class="scope.row.ischeck ? 'inps-active' : 'inps'"  type="text" :disabled="!scope.row.ischeck"/>
          </template>
        </el-table-column>
				<el-table-column align="center" label="差异(盘点-库存)" width="150" fixed="right">
				  <template slot-scope="scope">
				    <span>{{scope.row.checkNum*1 - scope.row.num*1}}</span>
				  </template>
				</el-table-column>
        <el-table-column align="center" width="150" label="操作" fixed="right" v-if="!islook">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="save(scope.row,scope.$index)" v-if="scope.row.ischeck">保存</el-button>
            <el-button type="text" size="small" @click="write(scope.row,scope.$index)" v-else>修改</el-button>
            <el-popconfirm
              placement="top"
              hideIcon
              title="是否要删除此行？"
              @onConfirm="deleteRow(scope.row,scope.$index)"
            >
              <el-button type="text" size="small" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
			<div class="submits">
				<div class="save" @click="saveOrder" v-if="!islook">保存</div>
				<div class="nosave" @click="nosaveOrder" v-if="!islook">取消</div>
				<div class="save" @click="back" v-if="islook">返回</div>
			</div>
    </div>
    <!-- 采购员弹窗 -->
		<el-dialog title="经手人" :visible.sync="buyerShow" width="80%">
     <div class="files">
   		<div class="files-left">
   			<el-menu class="el-menu-vertical-demo" @select="handleSelece" default-active="0">
   				<el-menu-item :index='index' v-for="(item,index) in ifydata" :key="index">
   					<span slot="title">{{item.departments}}</span>
   				</el-menu-item>
   			</el-menu>
   		</div>
   		<div class="files-right">
   			<div class="files-btm">
   				<el-table 
             :data="peopleData" 
             height="400" 
             highlight-current-row
             @current-change="handlePeople"
             style="margin-bottom: 20px;" 
             :show-header="true" >
   					<el-table-column align="center" prop="code" label="编码"></el-table-column>
   					<el-table-column align="center" label="头像">
   						<template slot-scope="scope">
   							<img :src="scope.row.icon" alt="" class="avatar">
   						</template>
   					</el-table-column>
   					<el-table-column align="center" prop="username" label="姓名"></el-table-column>
   					<el-table-column align="center" prop="departments" label="所属部门"></el-table-column>
   					<el-table-column align="center" prop="sex" label="性别"></el-table-column>
   					<el-table-column align="center" prop="power" label="职务"></el-table-column>
   					<el-table-column align="center" prop="phone" width="120" label="手机号码"></el-table-column>
   					<el-table-column align="center" prop="email" label="邮箱"></el-table-column>
   					<el-table-column align="center" prop="status" label="状态"></el-table-column>
   				</el-table>
   				<el-pagination background hide-on-single-page layout="prev, pager, next" :total="total" @prev-click="goPrev" @next-click="goNext" />
   			</div>
   		</div>
   	</div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="buyerShow = false">取 消</el-button>
       <el-button type="primary" @click="buyerShow = false">确 定</el-button>
     </span>
   </el-dialog>
  </div>
</template>
<script>
	import { getUser,getBumen } from '@/api/people'
	import { getCangku, productOneClass, withIdGetPro, addPandian, updatePandian,addPandianAll, getPandianAll  } from '@/api/cangku'
export default {
  data() {
    return {
      radio: "1",
      djtime: "2020-12-15",
			total: 1,
			value: '',
			tableData: [],
			twoClassify: [],   //商品分类
      tempData: {},   //修改商品信息
			classifyid: '',  //商品分类id
			options: [{
				label: '选项1',
				value: 1
			},
			{
				label: '选项2',
				value: 2
			}],
			ifydata: [{
			  id: 0,
			  departments: '全部',
			  value: ''
			}],   //部门列表
			bumen: '',     //部门值
      buyerList: {},
			proDeail: [],
      currentRow: null,
			buyerList: {},
			peopleData: [],  //人员列表
			islook: false,   //是否是查看操作
      gyShow: false, //供应商弹窗状态
      buyerShow: false, //采购员弹窗状态
			addProShow: false, //商品信息弹窗
      proData: [],
			writeOradd: 0  //编辑还是增加1编辑0增加
    };
  },
	mounted() {
		this.getpeople()
		this.cangkuList()
		this.bumenList()
		console.log(this.$route.params)
		if(this.$route.params.options){
		  this.tempData = JSON.parse(this.$route.params.options)
		  console.trace('tempData:',this.tempData)
			this.getPandian(this.tempData.checkId)
		  this.writOradd = 1
		}else{
		  this.writOradd = 0
		}
		if(this.$route.params.look){
			this.islook = true
			console.log(this.islook)
		}
	},
  methods: {
		// 根据传过来id获取盘点单信息   04a928ea9146556d876d48849ca28385
		getPandian(id){
			getPandianAll({checkId: id}).then(res => {
				console.log(res)
				let checkarr = []
				res.data[0].checkList.map(item => {
					checkarr.push({
						checkId: item.checkId,
						checkNum: item.checkNum,
						...item.warehouseSpecs
					})
				})
				console.log(checkarr)
				this.proData = checkarr
			})
		},
		// 获取人员列表
		getpeople(id){
		  console.log('id:',id)
		  getUser({departments: id}).then(res => {
		    console.log(res)
		    this.peopleData = res.data.list
		  })
		},
		// 选择分类菜单获取对应商品
		getProduct(item){
			console.log(item)
			withIdGetPro({pid: item}).then(res => {
			  console.log(res)
				res.data.map(item => {
					let temp = item
					temp.checkNum = ''
					return temp
				})
			  this.proData = res.data
				
			})
		},
		// 选择人员分类
		handleSelece(index){
			console.log(index)
			console.log('ifydata:',this.ifydata[index])
			const navindex = this.ifydata[index].value ? this.ifydata[index].value : null
			this.getpeople(navindex)
		},
		
		// 获取仓库分类
		cangkuList(){
		  getCangku({}).then(res => {
		    console.log(res)
		    this.twoClassify = res.data
		  })
		},
		// 部门列表
		bumenList(){
		  getBumen({}).then(res => {
		    console.log(res)
		    res.data.map(item => {
					item.value = item.departments
					return item
				})
				this.ifydata = [this.ifydata[0],...res.data]
		  })
		},
		// 修改商品信息
		write(value,index){
			console.log(index)
			this.proData.map(item => item.ischeck = false)
			let obj = this.proData[index];
			obj.ischeck = true;
			this.$set(this.proData, index, obj);
		},
		// 保存修改操作
		save(value,index){
			let obj = this.proData[index];
			obj.ischeck = false;
			this.$set(this.proData, index, obj);
		},
		// 增加商品
    addPeople() {
			this.addProShow = true
		},
    goPrev(page) {
      console.log(page);
    },
    goNext(page) {
      console.log(page);
    },
		// 人员部门分类选择获取人员信息
		handleSelece(index){
			console.log(index)
			console.log('ifydata:',this.ifydata[index])
			const navindex = this.ifydata[index].value ? this.ifydata[index].value : null
			this.getpeople(navindex)
		},
		// 确认选择采购员
		handlePeople(row){
		  console.log(row)
		  this.tempData.checkPersons = row.username
		  console.log(this.tempData.checkPersons)
			this.buyerShow = false
		},
		// 选择采购员
    checkBuyer() {
      this.buyerShow = true;
    },
		// 选择商品列表增加商品
		// handleAdd(row){
		// 	console.log(row)
		// 	row.ischeck = false
		// 	row.num = 1
		// 	this.proData.push({...row})
		// 	console.log(this.proData)
		// 	this.addProShow = false
		// },
		// 删除对应商品数据
		deleteRow(value,index){
			console.log(index)
			this.proData.splice(index,1)
		},
		// 保存新增
		
		saveOrder(){
			console.log('保存')
			console.log(this.tempData)
			console.log(this.proData)
			let index = null;
			for(let i = 0;i<this.proData.length;i++){
				if(this.proData[i].checkNum != ''){
					index = i
				}else{
					index = -1
					break;
				}
			}
			console.log(index)
			// 判断是否填写完整盘点数量
			if(index != -1){
				// 处理上传数据
				let checklist = []
				this.proData.map(item => {
					checklist.push({
						"parentId": item.id,
						"checkId": item.checkId,
						"checkNum": item.checkNum*1,
						"checkTime": item.checkNum*1 - item.num*1   //差异盘点-库存
					})
				})
				// 重组上传数据
				let params = {
					"checkList": checklist,
					"checkPersons": this.tempData.checkPersons,
					"checkTime": this.tempData.checkTime,
					"remarks": this.tempData.remarks,
					"checkId": this.tempData.checkId
				}
				console.log(params)
				// 判断是编辑还是添加
				if(this.writOradd == 0){
					addPandianAll(params).then(res => {
						console.log(res)
						this.$message({
							message: res.message,
							type: 'success'
						})
						this.$router.go(-1)
					})
				}else{
					updatePandian(params).then(res => {
						console.log(res)
						this.$message({
							message: res.message,
							type: 'success'
						})
						this.$router.go(-1)
					})
				}
				
			}else{
				this.$message({
					message: '请先填写完整盘点数量!',
					type: 'warning'
				})
			}
			// let index = this.proData.indexOf(item => {
			// 	return item.pdNum != ''
			// })
			// if()
			
		},
		// 取消新增
		nosaveOrder(){
			console.log('取消')
			this.$router.go(-1)
		},
		back(){
			this.$router.go(-1)
		},
  }
};
</script>
<style lang="scss" scoped>
.popup {
  padding: 0 20px;
}
.files {
  display: flex;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-top: 20px;
  overflow: hidden;
  padding: 20px;
}
.files-btm .btn-prev:after {
  content: "上一页";
}
.files-btm .btn-next:before {
  content: "下一页";
}
.files-btm .btn-prev,
.files-btm .btn-next {
  width: 65px;
}
.files-left {
	width: 160px;
	margin-right: 20px;
	/deep/.el-menu{
		border-right: none;
	}
	/deep/.el-menu-item{
		height: 35px;
		line-height: 35px;
		margin-bottom: 8px;
	}
	/deep/.el-menu-item.is-active{
		color: #fff;
		border-radius: 5px;
		background: rgba(24,160,94,.8);
	}
}
.files-right {
  flex: 1;
  overflow: hidden;
}
.files-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  // margin-top: 20px;
  overflow: hidden;
  &-title {
    display: flex;
    align-items: center;
    height: 45px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
  .addDate {
    margin: 20px 32px 10px 32px;
    height: 32px;
    border-radius: 3px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border: 1px dashed rgba(0, 0, 0, 0.3);
  }
  .el-button--text {
    margin: 0 15px;
  }
}
.avatar{
	width: 30px;
	height: 30px;
}
.zd3-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  overflow: hidden;
  &-title {
    display: flex;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
  .addDate {
    margin: 20px 32px 10px 32px;
    height: 32px;
    border-radius: 3px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border: 1px dashed rgba(0, 0, 0, 0.3);
  }
  .el-button--text {
    margin: 0 15px;
  }
}
.inps {
  width: 95%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  background: none;
  border: none;
  color: rgba(0, 0, 0, 0.8);
}
.inps-active {
  width: 95%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  background: rgba(24,160,94,.2);
  border: none;
  color: rgba(0, 0, 0, 0.8);
}
.change {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  > p {
    width: 25%;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      // width: inherit;
      background: none;
      height: 32px;
      // line-height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    .userselect {
      // max-width: 250px;
      flex: 1;
    }

    > span {
      display: block;
      width: 120px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
  }
}
.submits{
	display: flex;
	padding: 15px 20px;
	justify-content: flex-end;
	align-items: center;
	>div{
		width: 80px;
		height: 32px;
		text-align: center;
		line-height: 32px;
		color: #fff;
		font-size: 14px;
		border-radius: 4px;
		margin-left: 30px;
		cursor: pointer;
	}
	.save{
		background: #2196F3;
	}
	.nosave{
		background: #999;
	}
}
@media screen and (max-width: 1400px) {
  .change > p {
    width: 33%;
  }
}
</style>